<template>
  <div class="mainview">
    <!--  面包屑导航-->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">公众监督系统</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">系统管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>网格管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 核心的功能区 -->
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <span>网格管理</span>
          <el-button type="primary" :icon="Plus" @click="gridStore.show4Add">新建网格</el-button>
        </div>
      </template>

      <grid-table />

      <template #footer>Footer content</template>
    </el-card>

    <GridFormDialog />
  </div>
</template>

<script setup lang="js">
import { ArrowRight } from '@element-plus/icons-vue'
import GridTable from './GridTable.vue'
import { Plus } from '@element-plus/icons-vue'
import GridFormDialog from './GridFormDialog.vue'
import { useGridStore } from '@/stores/grid'
import { storeToRefs } from 'pinia'
const gridStore = useGridStore()
const { dialogFormVisible } = storeToRefs(gridStore)
</script>

<style scoped lang="less">
.mainview {
  .el-card {
    margin-top: 20px;
    border-radius: 10px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        color: #79bbff;
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
